<template>
  <div class="kbox">
    <div class="ktop">
      <img
        src="../../assets/images/cz1.png"
        alt=""
        class="goback"
        @click="goback"
      />
      {{ symbolInfo.symbolName }}{{ $t("common.yongxu") }}
      <img
        @click="searchshows"
        class="showsearch"
        src="../../assets/images/contract-search.png"
        alt=""
      />
      <img
        @click="handleLike"
        class="xing"
        :src="
          isLike
            ? require('../../assets/images/xing.png')
            : require('../../assets/images/xing1.png')
        "
        alt=""
      />
    </div>
    <div style="height: 44px"></div>

    <div class="stop">
      <div class="sff">
        <div class="sf1" :class="priceColor == 'green' ? 'green' : 'red'">
          {{ $formatMoney(riseAndFall.lastPrice, +accuracy) }}
        </div>
        <div class="sf2">
          <span class="sf2-1"
            >≈ ${{ $formatMoney(riseAndFall.lastPrice, +accuracy) }}</span
          >
          <span
            class="sf2-2"
            :class="+riseAndFall.riseAndFallRange > 0 ? 'green' : 'red'"
          >
            {{
              +riseAndFall.riseAndFallRange > 0
                ? "+" + riseAndFall.riseAndFallRange
                : riseAndFall.riseAndFallRange
            }}%</span
          >
        </div>
        <div class="sf4">
          <span class="sf4-1">{{ $t("common.biaojijiage") }}</span>
          <span class="sf4-2">{{
            $formatMoney(riseAndFall.markPrice, +accuracy)
          }}</span>
        </div>
      </div>
      <div class="sf3">
        <div class="sf3-1">
          <div class="sf3-1-l">24h{{ $t("long.zuigao") }}</div>
          <div class="sf3-1-r">
            {{ $formatMoney(riseAndFall.maxPrice, +accuracy) }}
          </div>
        </div>
        <div class="sf3-1">
          <div class="sf3-1-l">24h{{ $t("long.zuidi") }}</div>
          <div class="sf3-1-r">
            {{ $formatMoney(riseAndFall.minPrice, +accuracy) }}
          </div>
        </div>
        <div class="sf3-1">
          <div class="sf3-1-l">
            24h{{ $t("long.liang") }}({{ detail.tokenCurName }})
          </div>
          <div class="sf3-1-r">{{ handleSumPrice(riseAndFall.sumNum) }}</div>
        </div>
        <div class="sf3-1">
          <div class="sf3-1-l">
            24h{{ $t("long.e") }}({{ detail.mainCurName }})
          </div>
          <div class="sf3-1-r">{{ handleSumPrice(riseAndFall.sumPrice) }}</div>
        </div>
      </div>
    </div>

    <div class="sbox2">
      <div
        @click="chooseInterval(item, 1)"
        v-for="item in intervalArr1"
        :key="item.num"
        :class="
          symbolInfo.intervalText == item.text ? 'sbitem sbactive' : 'sbitem'
        "
      >
        {{ item.text1 }}
      </div>
      <div
        :class="chooseIndex != 1 ? 'sbitem sbactive' : 'sbitem'"
        @click="moreShow = !moreShow"
      >
        {{ handleTextLang()
        }}<img class="sbimg" src="../../assets/images/xia.png" alt="" />
      </div>
      <div class="dingwei" v-show="moreShow">
        <div
          class="dwitem"
          v-for="item in intervalArr2"
          @click="chooseInterval(item, 2)"
          :key="item.num"
          :class="
            symbolInfo.intervalText == item.text ? 'dwitem dwactive' : 'dwitem'
          "
        >
          {{ item.text1 }}
        </div>
      </div>
    </div>
    <div class="klbox">
      <tvComponent
        ref="trade"
        :symbolValue="symbolInfo.symbolName"
        intervalValue="15"
        :interval="symbolInfo.interval"
      />
      <div class="zbbox">
        <div
          :class="zhibiaoItem1 == item ? 'zbitem zbactive' : 'zbitem'"
          @click="chooseZhiBiao(item, 1)"
          v-for="item in zhibiao1"
          :key="item"
        >
          {{ item }}
        </div>
        <div class="zbitem">|</div>
        <div
          :class="
            (zhibiao2Arr[0] && zhibiao2Arr[0] == item) ||
            (zhibiao2Arr[1] && zhibiao2Arr[1] == item)
              ? 'zbitem zbactive'
              : 'zbitem'
          "
          @click="chooseZhiBiao(item, 2)"
          v-for="item in zhibiao2"
          :key="item"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <van-tabs
      v-model="tabIndex"
      class="tabbox"
      background="transparent"
      color="#0a7aff"
      line-width="20px"
      title-active-color="#fff"
      title-inactive-color="#999"
    >
      <van-tab :title="$t('long.weituodingdan')">
        <div class="tbbox">
          <div class="tb1">
            <div class="tab1-1">{{ $t("long.mairu") }}</div>
            <div class="tab1-1">{{ $t("long.maichu") }}</div>
          </div>
          <div class="tb12">
            <div class="tab1-12">{{ $t("common.shuliang") }}</div>
            <div class="tab1-12">{{ $t("common.jiage") }}</div>
            <div class="tab1-12">{{ $t("common.shuliang") }}</div>
          </div>
          <div class="tb2">
            <div class="tab2-li">
              <div class="tb2-lb">
                <div class="tab2-l" v-for="(item, index) in buys" :key="index">
                  <div class="tab2-l-1">{{ item.num || "--" }}</div>
                  <div class="tab2-l-2">
                    {{ item.price || "--" }}
                    <span
                      class="lvbg"
                      :style="'width:' + item.width + '%'"
                    ></span>
                  </div>
                </div>
              </div>
              <div class="tb2-lb">
                <div class="tab2-r" v-for="(item, index) in sells" :key="index">
                  <div class="tab2-r-1">
                    {{ item.price || "--" }}
                    <span
                      class="hongbg"
                      :style="'width:' + item.width + '%'"
                    ></span>
                  </div>
                  <div class="tab2-r-2">{{ item.num || "--" }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab :title="$t('long.zuixinchengjiao')">
        <div class="tbbox">
          <div class="tb12">
            <div class="tab1-12">{{ $t("long.shijian") }}</div>
            <div class="tab1-12">{{ $t("common.jiage") }}</div>
            <div class="tab1-12">
              {{ $t("common.shuliang") }}({{ detail.tokenCurName }})
            </div>
          </div>
        </div>
        <div class="tbxx" v-for="(item, index) in newestTrade" :key="index">
          <div class="tab1-12">{{ item.dateTime }}</div>
          <div class="tab1-12" :class="item.side == 0 ? 'green' : 'red'">
            {{ item.price }}
          </div>
          <div class="tab1-12">{{ item.num }}</div>
        </div>
      </van-tab>
      <van-tab class="message" :title="$t('long.xinxi')">
        <van-tabs v-model="activel" background="transparent">
          <van-tab class="rule" :title="$t('long.heyuexize')">
            <div v-for="(item, index) in hy" :key="index">
              <p
                :class="index !== 0 ? 'xiahua huip' : 'huip'"
                @click="ruledialog(index)"
              >
                {{ item.l }}
              </p>
              <p class="xiaobai">{{ item.r }}</p>
            </div>
          </van-tab>
          <van-tab class="lever" :title="$t('long.gangganbaozhengjin')">
            <div v-for="(item, index) in lever" :key="index">
              <div class="xiaobai">
                {{ $t("long.cengji") }}{{ item.hierarchy }}
              </div>
              <div class="leverbt">
                <div>
                  <p class="huip">{{ $t("long.cangweimingyijiazhi") }}</p>
                  <p class="xiaobai">
                    {{ item.minPosition }}-{{ item.maxPosition }}
                  </p>
                  <!-- <p>维持保证金比率</p>
                  <p>0.50%</p> -->
                </div>
                <div>
                  <p>{{ $t("long.zuigaogangganbeishu") }}</p>
                  <p class="xiaobai">{{ item.endMultiple }}X</p>
                  <!-- <p>维持保证金速算额(USDT)</p>
                  <p>0</p> -->
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </van-tab>
    </van-tabs>
    <chooseSymbolList
      ref="chooseSymbolList"
      @chooseSymbolItem="chooseSymbolItem"
    />
    <div style="height: 18vw"></div>
    <div class="bottom">
      <van-button @click="toContract" type="primary" color="#00A77F">{{
        $t("common.kaicang")
      }}</van-button>
      <van-button @click="toContract" type="warning" color="rgb(228, 83, 96)">{{
        $t("common.pingcang")
      }}</van-button>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
import { createSocket } from "../../common/_websocket";
import tvComponent from "../../components/ali-tradingview";
import chooseSymbolList from "../../components/chooseSymbolList";

export default {
  components: {
    tvComponent,
    chooseSymbolList,
  },
  data() {
    return {
      accuracy: 2,
      detail: {},
      hy: [],
      lever: [],
      activel: 0,
      zhibiaoItem1: "BOLL",
      zhibiao2Arr: ["MACD"],
      timeout: null,
      target: [],
      targetname: [0],
      chooseIndex: 1,
      zhibiao1: ["MA","EMA","BOLL"],
      zhibiao2: ["VOL","MACD","KDJ","RSI"],
      intervalArr1: [
        {
          text: "分时",
          text1: this.$t("long.fenshi"),
          num: "-1",
        },
        {
          text: "15分",
          text1: "15" + this.$t("long.fen"),
          num: "15",
        },
        {
          text: "1时",
          text1: "1" + this.$t("long.shi"),
          num: "60",
        },
        {
          text: "4时",
          text1: "4" + this.$t("long.shi"),
          num: "240",
        },
        {
          text: "1日",
          text1: "1" + this.$t("long.ri"),
          num: "1D",
        },
        {
          text: "1周",
          text1: "1" + this.$t("long.zhou"),
          num: "1W",
        },
        {
          text: "1月",
          text1: "1" + this.$t("long.yue"),
          num: "1M",
        },
      ],
      intervalArr2: [
        {
          text: "1分",
          text1: "1" + this.$t("long.fen"),
          num: "1",
        },
        {
          text: "5分",
          text1: "5" + this.$t("long.fen"),
          num: "5",
        },
        {
          text: "30分",
          text1: "30" + this.$t("long.fen"),
          num: "30",
        },
        {
          text: "12时",
          text1: "12" + this.$t("long.shi"),
          num: "720",
        },
      ],
      moreShow: false,
      // currentMsg: {},
      sells: [],
      buys: [],
      tabIndex: 0,
      priceColor: "green", //价格变换红绿
      newWebSocket: createSocket(),
      isLike: false,
      symbolInfo: {
        symbolId: "1",
        symbolName: "BTCUSDT",
        intervalText: "15分",
        interval: "15",
      },
      newestTrade: [], //最新成交
      //头部价格信息
      riseAndFall: {
        lastPrice: "",
        markPrice: "",
        maxPrice: "",
        minPrice: "",
        riseAndFallRange: "",
        sumNum: "",
        sumPrice: "",
      },
      chooseSymbolId: "1",
    };
  },
  activated() {
    this.initLang();
    this.moreShow = false;
    let symbolId = this.$route.query.symbolId;
    let symbolName = this.$route.query.symbolName;
    // let interval = this.$route.query.interval || 15;
    // let intervalText = this.$route.query.intervalText || '15分';
    let interval = localStorage.getItem("Kinterval") || 15;
    let intervalText = localStorage.getItem("KintervalText") || "15分";
      this.zhibiaoItem1 = interval != -1 ? "BOLL" : "";
    this.chooseIndex = 1;
    this.symbolInfo = {
      symbolId,
      symbolName,
      interval,
      intervalText,
    };
    let index = this.intervalArr2.findIndex(v=>v.num == interval)
    console.log('1111',index)
    if(index>=0){
      this.chooseIndex = 2
    }
    this.getInfo();
    this.socketConnect();

    this.$refs.trade.kInit(this.symbolInfo);
  },
  deactivated() {
    this.newWebSocket.close();
  },
  watch: {
    "riseAndFall.lastPrice"(newval, oldval) {
      if (+newval >= +oldval) {
        this.priceColor = "green";
      } else {
        this.priceColor = "red";
      }
    },
  },
  methods: {
    handleTextLang() {
      if (this.chooseIndex == 1) {
        return this.$t("long.gengduo");
      } else {
        return this.intervalArr2.find(
          (v) => v.text == this.symbolInfo.intervalText
        ).text1;
      }
    },
    initLang() {
      this.intervalArr1 = [
        {
          text: "分时",
          text1: this.$t("long.fenshi"),
          num: "-1",
        },
        {
          text: "15分",
          text1: "15" + this.$t("long.fen"),
          num: "15",
        },
        {
          text: "1时",
          text1: "1" + this.$t("long.shi"),
          num: "60",
        },
        {
          text: "4时",
          text1: "4" + this.$t("long.shi"),
          num: "240",
        },
        {
          text: "1日",
          text1: "1" + this.$t("long.ri"),
          num: "1D",
        },
        {
          text: "1周",
          text1: "1" + this.$t("long.zhou"),
          num: "1W",
        },
        {
          text: "1月",
          text1: "1" + this.$t("long.yue"),
          num: "1M",
        },
      ];
      this.intervalArr2 = [
        {
          text: "1分",
          text1: "1" + this.$t("long.fen"),
          num: "1",
        },
        {
          text: "5分",
          text1: "5" + this.$t("long.fen"),
          num: "5",
        },
        {
          text: "30分",
          text1: "30" + this.$t("long.fen"),
          num: "30",
        },
        {
          text: "12时",
          text1: "12" + this.$t("long.shi"),
          num: "720",
        },
      ];
    },
    searchshows() {
      this.$refs.chooseSymbolList.searchshow = true;
    },
    async getInfo() {
      const ret = await this.$http({
        url: `/contract/app/symbol/${this.symbolInfo.symbolId}`,
        method: "get",
      });
      if (ret.data.code === 0) {
        let zdata = ret.data.data;
        this.detail = ret.data.data;
        this.isLike = zdata.isOptional;
        this.hy = [
          {
            l: this.$t("long.zijinfeilvdjs"),
            // l: "资金费率/倒计时",
            r: zdata.fundingRate * 100 + "%",
          },
          {
            l: this.$t("long.zuixiaoxiadan1"),
            // l: "最小下单数量",
            r: zdata.minOrderNum,
          },
          {
            l: this.$t("long.shijiadanshouxufeilv"),
            // l: "市价单手续费率",
            r: `${zdata.marketFeeRate}%`,
          },
          {
            l: this.$t("long.shijiadanbizuidashu1"),
            // l: "市价单单笔最大数量",
            r: `${zdata.maxMarketOrderNum} USDT`,
          },
          {
            l: this.$t("long.xianjiadanshouxufeilv"),
            // l: "限价单手续费率",
            r: `${zdata.limitFeeRate}%`,
          },
          {
            l: this.$t("long.xianjiadanbizuidashu1"),
            // l: "限价单单笔最大数量",
            r: `${zdata.maxLimitOrderNum} USDT`,
          },
          {
            l: this.$t("long.zuidaguadanshu1"),
            // l: "最大挂单数量",
            r: zdata.maxPendingOrderNum,
          },
          {
            l: this.$t("long.zuidatiaojianguadanshu1"),
            // l: "最大条件单挂单数量",
            r: zdata.maxConditionPendingOrderNum,
          },
          {
            l: this.$t("long.zuixiaojiagebodongwei1"),
            // l: "最小价格波动单位",
            r: `${zdata.minPriceFloatUnit} USDT`,
          },
          {
            l: this.$t("long.zuixiaoxiadanjia1"),
            // l: "最小下单价格",
            r: `${zdata.minOrderPrice} USDT`,
          },
          {
            l: this.$t("long.xianjiadanshangbi1"),
            // l: "限价订单价格上限比率",
            r: `${zdata.limitOrderPriceCapRatio}%`,
          },
          {
            l: this.$t("long.xianjiadanxiabi1"),
            // l: "限价订单价格下限比率",
            r: `${zdata.limitOrderPriceFloorRatio}%`,
          },
          {
            l: this.$t("long.qiangpingqingsuan1"),
            // l: "强平清算费",
            r: `${zdata.liquidateFeeRate}%`,
          },
        ];
        this.lever = zdata.symbolHierarchy;
      }
    },
    chooseZhiBiao(item, index) {
      let name = item;
      if (index == 1) {
        // 左边的
        if (this.zhibiaoItem1 == name) {
          this.zhibiaoItem1 = {};
          this.$refs.trade.setTechnicalIndicator("none");
        } else {
          this.$refs.trade.setTechnicalIndicator(item);
          this.zhibiaoItem1 = item;
        }
      } else {
        let findex = this.zhibiao2Arr.length
          ? this.zhibiao2Arr.findIndex((v) => v == item)
          : -1;
        if (findex >= 0) {
          this.zhibiao2Arr.splice(findex, 1);
        } else {
          this.zhibiao2Arr.push(item);
          if (this.zhibiao2Arr.length > 2) {
            this.zhibiao2Arr.splice(0, 1);
          }
        }
        this.$refs.trade.setTechnicalIndicator2(this.zhibiao2Arr);
      }
    },
    chooseInterval(item, index) {
      if (item.text == "分时") {
        this.$refs.trade.klinecharts.setStyleOptions({
          candle: { type: "area" },
        });
        this.$refs.trade.klinecharts.removeTechnicalIndicator("candle_pane");
        this.zhibiaoItem1 = "";
      } else {
        this.$refs.trade.klinecharts.setStyleOptions({
          candle: { type: "candle_solid" },
        });
        console.log('zhibiaoItem1',this.zhibiaoItem1)
        if (this.zhibiaoItem1 == "") {
          this.zhibiaoItem1 = "BOLL"
          this.$refs.trade.setTechnicalIndicator("BOLL");
        }
      }
      this.chooseIndex = index;
      this.symbolInfo.interval = item.num;
      this.symbolInfo.intervalText = item.text;
      // if (item.text != "分时") {
        localStorage.setItem("Kinterval", item.num);
        localStorage.setItem("KintervalText", item.text);
      // }

      this.moreShow = false;
      this.$refs.trade.targetInterval(item.num);
    },
    handleSumPrice(val) {
      if (+val >= 100000000) {
        let n = Math.floor((+val / 100000000) * 100) / 100;
        return n + this.$t("long.yi");
      } else if (+val >= 10000) {
        let n = Math.floor((+val / 10000) * 100) / 100;
        return n + this.$t("long.wan");
      } else {
        return +val;
      }
    },
    toContract() {
      localStorage.setItem("chooseSymbolId", this.symbolInfo.symbolId);
      this.$router.push("/aliContract");
    },
    socketConnect() {
      this.newWebSocket.init({
        url: `/contract/ws/info`,
        onopen: (msg, data) => {
          this.newWebSocket.websocket.send(
            JSON.stringify({
              type: "subscribe", // 查询消息类型，固定值
              params: [
                "mergeKLine",
                this.symbolInfo.symbolId,
                this.symbolInfo.symbolName,
                "0.1",
              ], //下标 0 -> 请求类型不可变值
              // 下标 1 -> 币对(合约) id
              // 下标 2 -> 币对(合约) 名称
              // 下标 3 -> 深度级别
            })
          );
          this.getDeepList();
        },
        onmessage: (data) => {
          let zdata = JSON.parse(data);
          if (zdata.params[0] == "mergeKLine") {
            this.newestTrade = zdata.data.newestTrade || [];
            this.riseAndFall = zdata.data.riseAndFall || {};
            try {
              this.accuracy = this.riseAndFall.lastPrice
                .toString()
                .split(".")[1].length;
            } catch (error) {
              //
            }
          }
          if (zdata.params[0] == "depthMap" && zdata.data["0"]) {
            //深度
            let buys =
              zdata.data["0"] &&
              zdata.data["0"].map((v) => {
                return {
                  price: v[0],
                  num: v[1],
                  width: v[3] > 1 ? 100 : v[3] * 100,
                };
              });
            let sells =
              zdata.data["1"] &&
              zdata.data["1"].map((v) => {
                return {
                  price: v[0],
                  num: v[1],
                  width: v[3] > 1 ? 100 : v[3] * 100,
                };
              });
            this.sells = sells.slice(0, 20);
            this.buys = buys.slice(-20);
            this.sells = this.hanldeArrNumOff(this.sells, 20, "sells");
            this.buys = this.hanldeArrNumOff(this.buys, 20, "sells");
            this.sells = this.sells.reverse();
          }
        },
        onclose: (data) => {
          console.log(data);
        },
      });
    },
    //收藏
    async handleLike() {
      this.isLike = !this.isLike;
      let ret;
      if (this.isLike) {
        ret = await this.$http({
          url: "/contract/contractOptionalSymbol",
          method: "post",
          data: {
            symbolId: this.symbolInfo.symbolId,
          },
        });
      } else {
        ret = await this.$http({
          url: `/contract/contractOptionalSymbol/${this.symbolInfo.symbolId}`,
          method: "delete",
        });
      }
      if (ret.data.code === 0) {
        this.isLike
          ? Toast(this.$t("long.tianjiachenggong"))
          : Toast(this.$t("long.yichuchenggong"));
      }
    },
    goback() {
      this.$router.go("-1");
    },
    getDeepList() {
      this.newWebSocket.websocket.send(
        JSON.stringify({
          type: "subscribe", // 查询消息类型，固定值
          params: [
            "depthMap",
            this.symbolInfo.symbolName || "BTCUSDT",
            "0",
            "",
          ],
        })
      );
    },
    hanldeArrNumOff(arr, num, side) {
      if (arr.length < num) {
        let tarr = Array(num - arr.length).fill({
          price: undefined,
          num: undefined,
          width: 0,
        });
        if (side == "sell") {
          arr = tarr.concat(arr);
        } else {
          arr = arr.concat(tarr);
        }
      }
      arr = arr.map((v) => {
        if (v.num) {
          v.num = v.num * this.riseAndFall.lastPrice;
          if (v.num > 1000) {
            v.num = (v.num / 1000).toFixed(3) + "k";
          } else {
            v.num = v.num.toFixed(3);
          }
        }
        return v;
      });

      return arr;
    },
    arrayposition(arr, target1, target2, target3, target4) {
      var Arr = [];
      arr.forEach((elem, index) => {
        if (
          elem === target1 ||
          elem === target2 ||
          elem === target3 ||
          elem === target4
        ) {
          Arr.push(index);
        }
      });
      return Arr;
    },
    chooseSymbolItem({ id, name }) {
      this.chooseSymbolId = id;
      if (id) {
        this.searchshow = false;
        this.newWebSocket.close();
        this.$router.replace({
          query: {
            symbolId: id,
            symbolName: name,
            intervalText: this.symbolInfo.intervalText,
            interval: this.symbolInfo.interval,
          },
        });
        window.location.reload();
        // this.$router.go(0)
      }
    },
    ruledialog(val) {
      if (val == 0) {
        //
      } else if (val == 1) {
        Dialog.alert({
          title: this.$t("long.zuixiaoxiadan1"),
          message: this.$t("long.zuixiaoxiadan2"),
          confirmButtonText: this.$t("common.haode"),
          theme: "round-button",
          closeOnClickOverlay: true,
        })
          .then(() => {
            // on confirm
          })
          .catch(() => {
            // on cancel
          });
      } else if (val == 3) {
        Dialog.alert({
          title: this.$t("long.shijiadanbizuidashu1"),
          message: this.$t("long.shijiadanbizuidashu2"),
          confirmButtonText: this.$t("common.haode"),
          theme: "round-button",
          closeOnClickOverlay: true,
        })
          .then(() => {
            // on confirm
          })
          .catch(() => {
            // on cancel
          });
      } else if (val == 5) {
        Dialog.alert({
          title: this.$t("long.xianjiadanbizuidashu1"),
          message: this.$t("long.xianjiadanbizuidashu2"),
          confirmButtonText: this.$t("common.haode"),
          theme: "round-button",
          closeOnClickOverlay: true,
        })
          .then(() => {
            // on confirm
          })
          .catch(() => {
            // on cancel
          });
      } else if (val == 6) {
        Dialog.alert({
          title: this.$t("long.zuidaguadanshu1"),
          message: this.$t("long.zuidaguadanshu2"),
          confirmButtonText: this.$t("common.haode"),
          theme: "round-button",
          closeOnClickOverlay: true,
        })
          .then(() => {
            // on confirm
          })
          .catch(() => {
            // on cancel
          });
      } else if (val == 7) {
        Dialog.alert({
          title: this.$t("long.zuidatiaojianguadanshu1"),
          message: this.$t("long.zuidatiaojianguadanshu2"),
          confirmButtonText: this.$t("common.haode"),
          theme: "round-button",
          closeOnClickOverlay: true,
        })
          .then(() => {
            // on confirm
          })
          .catch(() => {
            // on cancel
          });
      } else if (val == 8) {
        Dialog.alert({
          title: this.$t("long.zuixiaojiagebodongwei1"),
          message: this.$t("long.zuixiaojiagebodongwei2"),
          confirmButtonText: this.$t("common.haode"),
          theme: "round-button",
          closeOnClickOverlay: true,
        })
          .then(() => {
            // on confirm
          })
          .catch(() => {
            // on cancel
          });
      } else if (val == 9) {
        Dialog.alert({
          title: this.$t("long.zuixiaoxiadanjia1"),
          message: this.$t("long.zuixiaoxiadanjia2"),
          confirmButtonText: this.$t("common.haode"),
          theme: "round-button",
          closeOnClickOverlay: true,
        })
          .then(() => {
            // on confirm
          })
          .catch(() => {
            // on cancel
          });
      } else if (val == 10) {
        Dialog.alert({
          title: this.$t("long.xianjiadanshangbi1"),
          message: this.$t("long.xianjiadanshangbi2"),
          confirmButtonText: this.$t("common.haode"),
          theme: "round-button",
          closeOnClickOverlay: true,
        });
      } else if (val == 11) {
        Dialog.alert({
          title: this.$t("long.xianjiadanxiabi1"),
          message: this.$t("long.xianjiadanxiabi2"),
          confirmButtonText: this.$t("common.haode"),
          theme: "round-button",
          closeOnClickOverlay: true,
        })
          .then(() => {
            // on confirm
          })
          .catch(() => {
            // on cancel
          });
      } else if (val == 12) {
        Dialog.alert({
          title: this.$t("long.qiangpingqingsuan1"),
          message: this.$t("long.qiangpingqingsuan2"),
          confirmButtonText: this.$t("common.haode"),
          theme: "round-button",
          closeOnClickOverlay: true,
        })
          .then(() => {
            // on confirm
          })
          .catch(() => {
            // on cancel
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.kbox {
  min-height: 100vh;
  background: #090A1B;
}
.ktop {
  font-size: 4.8vw;
  line-height: 44px;
  background-color: #090A1B;
  color: rgba(255, 255, 255, 100);
  text-align: center;
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  .img {
    position: absolute;
    top: 3.6vw;
    right: 4vw;
    display: flex;
    justify-content: space-between;
    img {
      width: 5vw;
    }
  }
  .showsearch {
    width: 5.4vw;
    margin-left: 4vw;
  }
  .xing {
    width: 6vw;
    position: absolute;
    top: 3vw;
    right: 3vw;
  }
  .goback {
    position: absolute;
    top: 3vw;
    left: 2vw;
    height: 5.3vw;
    width: 5.3vw;
  }
}
.stop {
  height: 14vh;
  width: 100%;
  //   border: 2px solid red;
  position: relative;
  .sff {
    position: absolute;
    left: 20px;
    top: 50%;
    height: 60px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
  }
  .sf1 {
    font-size: 7.3vw;
    font-weight: 600;
    color: #00a77f;
  }
  .sf2 {
    font-size: 3vw;
    color: #fff;
    .sf2-1 {
      margin-right: 5px;
    }
  }
  .sf4 {
    font-size: 2.6vw;
    color: #fff;
    .sf4-1 {
      color: #999;
      margin-right: 5px;
    }
  }
  .sf3 {
    width: 40vw;
    height: 60px;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    .sf3-1 {
      width: 100%;
      // height: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 10px;
      &:last-child {
        margin: 0;
      }
      .sf3-1-l {
        color: #999;
      }
    }
  }
}

.sbox2 {
  height: 30px;
  padding: 0 10px;
  //   margin-top: 20px;
  display: flex;
  align-items: center;
  position: relative;
  border-bottom: 1px solid #393b42;
  .sbitem {
    // width: 40px;
    padding: 5px 2.2vw;
    // border: 1px solid red;
    color: #8992AE;
    .sbimg {
      width: 12px;
    }
  }
  .sbactive {
    // background: #2f2f30;
    border-radius: 4px;
    color: #fff;
  }
  .dingwei {
    width: 92vw;
    padding: 0 4vw;
    height: 40px;
    // border:2px solid red;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #090A1B;
    .dwitem {
      flex: 1;
      padding: 6px 0vw;
      margin-right: 4vw;
      color: #8992AE;
      background: #2f2f30;
      border-radius: 4px;
    }
  }
}
.klbox {
  width: 100%;
  // height:40vh;
}
.zbbox {
  padding: 0 10px;
  display: flex;
  align-items: center;
  height: 10vw;
  // border:1px solid red;
  border-top: 1px solid #393b42;
  border-bottom: 1px solid #393b42;
  justify-content: space-between;
  .zbitem {
    color: #8992AE;
    flex: 1;
    font-size: 3.2vw;
  }
  .zbactive {
    color: #fff;
    font-weight: 600;
  }
}
.tabbox {
  // width: 70vw;
  ::v-deep .van-tabs__wrap {
    width: 70vw;
  }
}

.tbbox {
  padding: 10px 20px;
  .tb1 {
    height: 40px;
    display: flex;
    align-items: center;
    .tab1-1 {
      flex: 1;
      text-align: left;
      color: #999;
    }
  }
  .tb12 {
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #999;
    .tab1-12 {
      flex: 1;
      text-align: left;
      &:nth-child(2) {
        text-align: center;
      }
      &:nth-child(3) {
        text-align: right;
      }
    }
  }
  .tb2 {
    width: 100%;
    display: flex;
    .tab2-li {
      width: 100%;
      display: flex;
      color: #ccc;
      .tb2-lb {
        flex: 1;
        .tab2-l {
          height: 30px;
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: space-between;
          position: relative;

          .tab2-l-2 {
            margin-right: 2px;
            color: #00a77f;
          }
        }
        .tab2-r {
          height: 30px;
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;

          .tab2-r-1 {
            margin-left: 2px;
            color: #e45360;
          }
        }
      }
    }
  }
}
.tbxx {
  padding: 0 20px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ccc;
  .tab1-12 {
    flex: 1;
    text-align: left;
    &:nth-child(2) {
      text-align: center;
    }
    &:nth-child(3) {
      text-align: right;
    }
  }
}
.hongbg {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 50%;
  background-color: #b62833;
  opacity: 0.2;
}
.lvbg {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 50%;
  background-color: #2d8b59;
  opacity: 0.2;
}
.message {
  ::v-deep .van-tabs__wrap {
    width: 50vw;
  }
}

::v-deep .message.van-tab__pane {
  .van-tabs {
    padding-top: 0;
  }
  .van-tabs__content {
    border-top: 0;
  }
  .van-tab {
    color: #ddd;
    flex: none;
  }
  .van-tab__text {
    padding: 1.2vw 1.7vw;
    border-radius: 4px;
    font-size: 3.2vw;
  }
  .van-tab--active {
    .van-tab__text {
      background-color: #171A2B;
    }
  }
  .van-tabs__line {
    background: transparent;
  }
  .van-tabs__wrap {
    margin-bottom: 6vw;
    margin-top: 3vw;
    margin-left: 2vw;
  }
  .rule {
    padding: 0 3.5vw;
    width: calc(100vw - 7vw);
    > div {
      display: flex;
      justify-content: space-between;
      height: 8vw;
      p:last-child {
        color: #fff;
      }
    }
    .xiahua {
      text-decoration: underline;
    }
  }
  .lever {
    padding: 0 3.5vw;
    width: calc(100vw - 7vw);

    text-align: left;
    > div {
      color: #fff;
      padding-bottom: 12px;
      border-bottom: 1px solid #232531;
      margin-bottom: 12px;
      .leverbt {
        display: flex;
        div {
          &:first-child {
            width: 52vw;
          }
          p {
            &:first-child {
              color: #8992AE !important;
              margin: 10px 0 6px;
            }
          }
        }
      }
    }
  }
}

.bottom {
  position: fixed;
  bottom: 0;
  background-color: #090A1B;
  width: 100vw;
  height: 18vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 10;
  font-weight: 600;
  button {
    width: 38.3vw;
    height: 10.4vw;
    border-radius: 6px;
  }
}
.red {
  color: #e45360 !important;
}
.green {
  color: rgb(0, 167, 127) !important;
}
.huip {
  color: #999;
}
.xiaobai {
  color: #ddd !important;
}
</style>
